<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>chatbox</title>
    <style>
      html {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      body {
        height: 100%;
        margin: 0;
        padding: 3em;
      }
      .chat_ui_background {
        background-color: pink;
        height: 95%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-radius: 1em;
        padding: 2em;
      }
      .chat_ui_submit_background {
        background-color: white;
        height: auto;
        width: 100%;
        display: flex;
        flex-direction: row;
        border-radius: 2em;
      }
      .chat_ui_submit_input {
        width: 93%;
        border-radius: 2em;
        font-size: larger;
      }
      .chat_ui_submit_submit {
        width: 6%;
        border-radius: 2em;
        margin-left: 1%;
        font-size: larger;
        font-style: italic;
        font-weight: bold;
      }
      .chat_ui_messages_list {
        margin: 1em;
        overflow: auto;
        list-style-type: none;
        height: 95%;
        display: flex;
        flex-direction: column;
      }
      .chat_ui_messages_background {
        background-color: white;
        height: 90%;
        width: 100%;
        border-radius: 2em;
        margin-bottom: 1em;
      }
      #ping_messages {
        margin-left: auto;
        font-size: medium;
        color: black;
        border: 1px solid pink;
        background-color: pink;
        border-radius: 1em;
        padding: 0.5em;
        margin-bottom: 0.5em;
      }
      #pong_messages {
        margin-right: auto;
        font-size: medium;
        color: black;
        border: 1px solid pink;
        background-color: pink;
        border-radius: 1em;
        padding: 0.5em;
        margin-bottom: 0.5em;
      }
    </style>
  </head>
  <body>
    <div class="chat_ui_background">
      <div class="chat_ui_messages_background">
        <div class="chat_ui_messages_list"></div>
      </div>
      <div class="chat_ui_submit_background">
        <input
          type="text"
          class="chat_ui_submit_input"
          placeholder="请输入内容"
        />
        <input
          type="button"
          class="chat_ui_submit_submit"
          value="↗"
          onclick="send_messages()"
          title="发送"
        />
      </div>
    </div>
    <script>
      const input = document.querySelector(".chat_ui_submit_input");
      const chat_list = document.querySelector(".chat_ui_messages_list");
      const chat_bot = readJSON();
      const all_key = Object.keys(chat_bot);

      function send_messages() {
        if (
          input.value === undefined ||
          input.value === null ||
          input.value === ""
        )
          return;
        const new_div = document.createElement("div");
        new_div.textContent = input.value;
        input.value = null;
        new_div.id = "ping_messages";
        chat_list.append(new_div);
        chat_list.scrollTop = chat_list.scrollHeight;
        back_messages(new_div.textContent);
      }

      function back_messages(text) {
        let key = "default",
          cmp = 0.0;
        for (let elm of all_key) {
          let tmp = jaccardSimilarity(elm, text);
          if (tmp > cmp) (cmp = tmp), (key = elm);
        }
        const new_div = document.createElement("div");
        const index = random_int(chat_bot[key].length);
        new_div.textContent = chat_bot[key][index];
        console.log(index);
        new_div.id = "pong_messages";
        chat_list.append(new_div);
        chat_list.scrollTop = chat_list.scrollHeight;
      }

      //回车发送信息
      input.addEventListener("keydown", function (event) {
        if (event.key === "Enter") {
          send_messages();
        }
      });
      function random_int(R) {
        return Math.floor(Math.random() * R);
      }
      //下面这些是AI生成的
      function jaccardSimilarity(str1, str2) {
        const set1 = new Set(str1.split(""));
        const set2 = new Set(str2.split(""));

        const intersection = new Set([...set1].filter((x) => set2.has(x)));
        const union = new Set([...set1, ...set2]);

        return intersection.size / union.size;
      }

      function readJSON() {
        const xhr = new XMLHttpRequest();
        xhr.open("GET", "./data.json", false); // false 表示同步请求
        xhr.send();

        if (xhr.status !== 200) {
          console.error("Network response was not ok " + xhr.statusText);
          document.getElementById("output").textContent =
            "Fetch error: " + xhr.statusText;
          return null;
        }
        try {
          const data = JSON.parse(xhr.responseText);
          console.log("Fetched data:", data);
          return data; // 返回解析后的JSON对象
        } catch (error) {
          console.error("JSON parse error: ", error);
          document.getElementById("output").textContent =
            "JSON parse error: " + error.message;
          return null;
        }
      }
    </script>
  </body>
</html>
